{% extends 'base.html.twig' %}

{% set meta = {
    title: cookbook.title,
    title_suffix: ' - Cookbook - Symfony UX',
    description: cookbook.description,
    canonical: url('app_cookbook_show', {slug: cookbook.slug}),
    social: {
        title: cookbook.title ~ ' - Symfony UX',
        description: cookbook.description,
        image: {
            url: absolute_url(asset('images/cookbook/%s-1280x720.png'|format(cookbook.slug))),
            type: 'image/png',
            width: 1280,
            height: 720,
            alt: cookbook.title ~ ' - Cookbook Illustration',
        },
    },
} %}

{% block content %}

    <article class="Cookbook">
        <div class="hero">
            <div class="container-fluid container-xxl pt-4 px-4 px-md-5 my-5">
                <div class="text-center mt-md-0">
                    <p class="eyebrows">
                        <a href="{{ url('app_cookbook') }}">Cookbook</a>
                    </p>
                    <h1 class="text-center mt-0">{{ cookbook.title }}</h1>
                    <p style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 demo-introduction">
                        {{- cookbook.description -}}
                    </p>
                    {% if false and cookbook.tags %}
                        <ul class="tags">
                            {% for tag in cookbook.tags %}
                                <li class="Tag">{{ tag }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
                <div class="pt-4">
                    <div class="image-title">
                        <img src="{{ asset('images/cookbook/%s-1280x720.png'|format(cookbook.slug)) }}"
                             alt="{{ cookbook.title }} Illustration"
                             width="1280" height="720"
                        />
                    </div>
                </div>
            </div>
        </div>

        <div class="content"  style="max-width: 75ch;margin-inline: auto;font-size: 1.25rem;line-height: 1.75;font-weight: 300;">
            {{ cookbook.content|raw|markdown_to_html }}
        </div>

        <div class="cluster">
            <twig:Badge:Author author="{{ cookbook.author }}" />
            <twig:Badge:Date label="Published" date="{{ cookbook.publishedAt }}" />
        </div>

    </article>
{% endblock %}

{% block aside %}
    {% embed '_aside.html.twig' %}
        {% block links %}
             <twig:DocsLink
                    title="PHP Packages"
                    text="Symfony UX bundles & components."
                    url="{{ url('app_packages') }}"
                    icon="lucide:package"
                />
                <twig:DocsLink
                    title="Interactive Demos"
                    text="With commented source code."
                    url="{{ url('app_demo_live_component') }}"
                    icon="lucide:monitor-check"
                />
                <twig:DocsLink
                    title="Community"
                    text="Feedback · support · contributions."
                    url="https://github.com/symfony/ux"
                    icon="github"
                />
        {% endblock %}
    {% endembed %}
{% endblock %}
